//配置文件，JS文件，通过NODE中的模块操作，向外暴露一个配置对象,s手动指定入口和出口
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	//入口，表示要使用webpack打包哪个文件
	entry:path.join(__dirname,'./src/main.js'),
	output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
		filename:'bundle.js'//这是指定输出的文件名称
	},
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
    ],
	module:{
		//这个节点用于配置所有第三方模块加载器
		rules:[//所有第三方模块匹配规则
			//配置处理 .css文件的第三方loader规则
			{test:/\.css$/,use:['style-loader','css-loader','px2rem-loader?remUnit=75&remPrecision=8']},
			//配置处理 .less文件的第三方loader规则
			{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
			//配置处理 .scss文件的第三方loader规则
			{test:/\.scss$/,use: ['style-loader', 'css-loader','sass-loader']},
			//处理图片路径的loader
			{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=178778&name=[hash:8]-[name].[ext]'},
			//limit给定值，是图片的大小，单位byte,如果我们引用的图片大于或者等于给定的limit，则不转为base64格式字符串,小于则会被转为base64字符串
//			[name]指定图片名称是原名称,ext后缀也是一样
//			[hash:8]取前八位HASH,防止 相同图片名称,覆盖变成同一张图片
			{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
			//配置Babel来转换成高级语法ES
			{test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
			//处理.vue文件的loader
			{test:/\.vue$/,use:'vue-loader'}
		]
	},
	resolve:{
		alias:{
			"vue$":"vue/dist/vue.js"
		}
	}
	
	
//	,
//	devServer:{
//		open:true,
//		port:3000,
//		contentBase:'src',
//		hot:true
//	}
//plugins:[
//	new webpack.H
//]
}
